<template>
  <div class='sign-detail'>
    <div class="detail-intro">
      <p v-if="detailInfo.info"><span>{{detailInfo.info.category}}</span><span v-if="detailInfo.info.title">({{detailInfo.info.title}})</span></p>
      <p v-if="detailInfo.info"><span>签到方式：</span><span>{{detailInfo.info.type}}</span></p>
      <p v-if="detailInfo.info"><span>签到时间：</span><span>{{detailInfo.info.time}}</span></p>
      <p v-if="detailInfo.info"><span><span class="color-red">未签到</span>/总考勤：</span><span>{{detailInfo.notcont}}/{{detailInfo.totals}}</span></p>
    </div>
    <Search :search="searchInfo" @new_search="getSearch"  />
    <ul class="search-results detail-list">
      <li v-for="(item, index) in searchResults" :key="index">
        <img :src="item.wx_pic||item.photo||defaultImg" alt="">
        <div class="content">
          <p><span>姓名：</span><span>{{item.name}}</span></p>
          <p><span>班级：</span><span>{{item.class}}</span></p>
          <p><span>学号：</span><span>{{item.number}}</span></p>
        </div>
        <div class="operate pr">
          <span :class="'pa active '+'color_'+item.state " @click="changeState(item)">{{item.state | formaltState}}</span>
        </div>
      </li>
    </ul>
    <p class="title">未签到学生 <span>点击状态可以修改签到状态</span></p>
    <ul class="detail-list">
      <li v-for="(item, index) in detailInfo.list" :key="index">
        <img :src="item.wx_pic||item.photo||defaultImg" alt="">
        <div class="content">
          <p><span>姓名：</span><span>{{item.name}}</span></p>
          <p><span>班级：</span><span>{{item.class}}</span></p>
          <p><span>学号：</span><span>{{item.number}}</span></p>
        </div>
        <div class="operate pr">
          <span :class="'pa active '+'color_'+item.state " @click="changeState(item)">{{item.state | formaltState}}</span>
        </div>
      </li>
    </ul>

    <div class="btn-box">
      <van-button type="primary" class="bc-green btn" @click="endSign">结束签到</van-button>
      <van-button type="primary" class="bc-green btn" @click="showRandom">随机签到</van-button>
    </div>


    <RandomSign />
  </div>
</template>
<script>
import Search from "../../../../components/search.vue"
import RandomSign from './randomSign.vue'
export default {
  components: {Search,RandomSign},
  name: "",
  data() {
    return {
      detailInfo:{},
      defaultImg:require("../../../../assets/images/home/default.jpg"),
      searchInfo:{
        search:""
      },
      stuInfo:{},
      searchResults:[]
    };
  },
  filters:{
    formaltState(val){
      return ["","签到","迟到","请假","旷到"][val]
    }
  },
  methods: {
    getDetailInfo(){
      var params={
        id:_g.getRouterParams(this).id,
        length:this.detailInfo.notcont
      }
      var headers={
        headers: {'Content-Type': 'application/json;charset=UTF-8'},
        timeout: 60000  
      }
      $axios.post(PATH+"Attendance/rollCallRrends",params,headers).then(res=>{
        this.detailInfo=res.data
        if(this.detailInfo.notcont !== 0){
          this.rollCallRrends();
        }
      }).catch(error=>{
        this.getDetailInfo()
      })
    },

    getSearch(){
      var params={
        id:_g.getRouterParams(this).id,
        search:this.searchInfo.search
      }
      _g.apiPost("Attendance/searchStudent",params).then(res=>{
        this.searchResults=res
      })
    },

    changeState(item){
      this.stuInfo=item
      this.$store.state.dias.acheet.columns=["签到","迟到","请假","旷到"]
      this.$store.state.dias.acheet.show=true
      this.$store.state.dias.acheet.confirm=this.sureConfirm
    },
    sureConfirm(val){
      var params={
        id:_g.getRouterParams(this).id,
        s_number:this.stuInfo.number,
        state:["签到","迟到","请假","旷到"].indexOf(val)-0+1
      }
      _g.apiPost("Attendance/studentSignin",params).then(res=>{
        _g.toMessage(res)
        this.$store.state.dias.acheet.show=false
        this.searchInfo.search=""
        this.searchResults=[]
      })
    },

    /**
     * @name 结束签到
     */
    endSign(){
      _g.apiPost("Attendance/endSignIn",{id:_g.getRouterParams(this).id}).then(res=>{
        _g.toMessage(res)
        if(!res.error)this.$router.go(-1)
      })
    },

    /**
     * @name 随机签到
     */
    showRandom(){
      _g.apiPost("Attendance/randSignIn",{id:_g.getRouterParams(this).id}).then(res=>{
        this.$store.state.dias.randomSign.data=res
        if(res.length==0){
          _g.toMessage({error:1,msg:"暂无签到人员"})
          return
        }
        this.$store.state.dias.randomSign.show=true
      })
    }
  },
  created() {
    this.getDetailInfo()
  }
};
</script>
<style lang="scss" scoped>
.sign-detail {
  height: 100%;
  overflow: auto;

  .detail-intro{

    p{
      height: 80px;
      line-height: 80px;
      padding: 0 20px;
      font-size: 16px;
      box-sizing: border-box;
      border-bottom: 1px solid #efefef;

      span:nth-of-type(2){
        font-size: 14px;
        color: #666
      }
    }
  }
  .title{
    font-size: 16px;
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    font-size: 16px;
    box-sizing: border-box;
    border-bottom: 1px solid #efefef;
    
    >span{
      font-size: 12px;
      color: #999;
    }
    >span:before{
      content:"*";
      color: red;
    }
  }
  .detail-list{
    max-height: calc(100% - 280px);
    overflow: auto;
    li{
      display: flex;
      padding: 10px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #efefef;

      img{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin-right: 20px;
      }

      .content{
        font-size: 13px;

        span:nth-of-type(2){
          color: #999
        }
      }
      .operate{
        margin-left: auto;

        >span{
          width: 80px;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          color: red;
        }
        >span:active{
          background-color: transparent;
        }
        .color_1{
          color: green
        }
        .color_2{
          color: #ffab34;
        }
        .color_3{
          color: #5c76fc;
        }
        .color_4{
          color: #ff3d3d;
        }
      }
    }
  }
  .btn-box{
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
    padding: 0 10px;

    .btn{
      flex: 1;
      margin: 0 10px;
    }
  }
}
</style>